﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Profile.aspx.cs" Inherits="TwKarma.Web.App.Profile" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head id="Head1" runat="server">
    <title>#TwKarma</title>
	<link href="content/main.css" rel="stylesheet" type="text/css" />
	<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

	<script type="text/javascript">

	    $(document).ready(function () {
	        var name = window.location.href;
	        if (name.indexOf('@') != -1) {
	            name = name.substr(name.indexOf('@') + 1, 10000);
	            if (name.length > 0) {

	                $.getJSON('http://twitter.com/users/' + name + '.json?callback=?', function (data) {
	                    updateScreenForUser(data);
	                });

	                $.get('/Parts/Render.aspx?For=' + name + '&What=karmarecieved', function (data) {
	                    if (data.length == 0) {
	                        $('#karma_recieved').html("<div style=\"padding:10px;\">None</div>");
	                    } else {
	                        $('#karma_recieved').html(data);
	                    }
	                });

	                $.get('/Parts/Render.aspx?For=' + name + '&What=karmasent', function (data) {
	                    if (data.length == 0) {
	                        $('#karma_sent').html("<div style=\"padding:10px;\">None</div>");
	                    } else {
                            $('#karma_sent').html(data);
	                    }
	                });
	            }
	        }
	    });

		function updateScreenForUser(data) {

			$("div.floatBackground").css('display', 'none'); 			
			$('body').css({ 'background-color': '#' + data.profile_background_color });
			$('body').css({ 'background-image': 'url(' + data.profile_background_image_url + ')' });
			$('body').css({ 'background-repeat': data.profile_background_tile ? 'repeat' : 'no-repeat' });

			if (data.url === undefined || data.url == null || data.url.length == 0) {
				$('#profile_url').css('display', 'none');
			}
			else {
				$('#profile_url a').text(data.url);
				$('#profile_url a').attr('href', data.url);
			}

			$('#screenname').text("@" + data.screen_name);

			if (data.description === undefined || data.description === null) {
			    $('#profile_bio').remove();
			}
			else {
			    $('#profile_bio span').text(data.description);
			}
			
            if (data.description === undefined || data.description === null) {
			    $('#profile_location').remove();
			}
			else {
			    $('#profile_location span').text(data.location);
			}
            			
			$('#profile_followers_count').text(data.followers_count);
			$('#profile_friends_count').text(data.friends_count);
			$('#profile_tweets').text(data.statuses_count);
			$('#profile_listed').text(data.listed_count);

			
			$('#profile_image_url span').text(data.profile_image_url);
			$('#profile_created_at span').text(data.created_at);

			$('#profile_image').attr('src',data.profile_image_url);
			$('.profile_box').css('background-color', '#' + data.profile_sidebar_fill_color);
			$('.profile_box *').css('color', '#' + data.profile_text_color);
			$('.profile_box').css('border', '1px solid #' + data.profile_sidebar_fill_color);
			$('.profile_box a').css('color', '#' + data.profile_link_color);
			
            
            if (data.verified) {
                $('#profile_verified').text("Verfied");
            }
            else {
                $('#profile_verified').remove();
            }

            // Do this now, and again in 500ms incase html is being updated by another thread
            setColours(data.profile_link_color, data.profile_text_color);
            setTimeout("setColours('" + data.profile_link_color + "','" + data.profile_text_color + "');", 500);
    };

    function setColours(link_color, text_color) {

        $('.loading').css('color', '#000');
        $('.profile_link_color').css('color', link_color);

        // Edit the actual CSS entry for the page
        var ss = document.styleSheets;

        for (var i = 0; i < ss.length; i++) {
            var rules = ss[i].cssRules || ss[i].rules;

            for (var j = 0; j < rules.length; j++) {
                if (rules[j].selectorText === ".profile_link_color") {
                    rules[j].style.color = "#" + link_color;
                }

                if (rules[j].selectorText === ".profile_text_color") {
                    rules[j].style.color = "#" + text_color;
                }
            }
        }
    };

	</script>

    <style type="text/css">
    	
    	.profile_head { padding-top: 15px; font-size: 14pt; text-align:center; color: #555;}
    	.profile_head div.score { margin: 0px 10px 0px 10px; padding: 10px; background: #f5f5f5; }
    	.profile_head div.score span { font-size: 18pt; font-weight: bold; }
    	.profile_head div.score span.good { color: #2c2; }
    	.profile_head div.score span.bad { color: #f05; }
    	.profile_head div.score span.indifferent { color: #999; }
    	
    	
        .profile_desc { margin-left: 60px; }        
        .profile_desc div { padding: 3px 0px 3px 0px; font-size: 11pt; }
        .profile_desc p  { padding: 3px 0px 3px 0px; font-size: 12pt;} 
        #profile_url a { text-decoration: none; }
        
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div class="floatBackground"></div>
	<div class="page">

		<div class="header">
			<h1><a href="/" title="Home">#TwKarma</a></h1>		
		</div>
		
		<div class="content">
	
			<table cellpadding="2" cellspacing="2" border="0" width="100%">
				<tr>
					<td><div class="greyscalebox">Karma</div></td>
					<td><div class="greyscalebox"><p><asp:Literal ID="litAboutName" runat="server" /></p></div></td>
				</tr>			
				<tr>
					<td width="50%" valign="top">
						<div class="profile_head">
                            <div class="score">
							    <asp:Literal ID="litScreenname" runat="server" /> has a TwKarma of&nbsp;&nbsp;<asp:Literal ID="litKarma" runat="server" />&nbsp;
                            </div>
						</div>
					</td>
					<td width="50%" valign="top">
						<div class="profile_box" style="height: 220px" >						
			
							<img id="profile_image" src="http://a1.twimg.com/sticky/default_profile_images/default_profile_4_normal.png" style="float: left; margin: 5px;" />

                            <div class="profile_desc">
							    <div id="profile_verified" class="css-inline"></div>
                                <div id="profile_bio" class="loading"><span>loading</span></div>
							    <div id="profile_location" class="loading"><span>loading</span></div>
							    <div id="profile_url"><a rel="nofollow">loading</a></div>
                                
                                <table cellpadding="0" cellspacing="0" border="0" width="95%" style="margin: 10px 0px 0px 10px;">
                                <tr>
                                    <td><div id="profile_tweets" class="css-inline loading profile_link_color"><span>000</span></div></td>                            
                                    <td><div id="profile_friends_count" class="css-inline loading profile_link_color"><span>000</span></div></td>
                                    <td><div id="profile_followers_count" class="css-inline loading profile_link_color"><span>000</span></div></td>
                                    <td><div id="profile_listed" class="css-inline loading profile_link_color"><span>000</span></div></td>
                                </tr>
                                <tr>
                                    <td>Tweets</td><td>Friends</td><td>Followers</td><td>Listed</td>
                                </tr>
                                </table>
                            </div>
						</div>
					</td>
				</tr>
				<tr>
					<td><div class="greyscalebox">Recived</div></td>
					<td><div class="greyscalebox">Sent</div></td>
				</tr>
				<tr>
					<td valign="top"><div id="karma_recieved"></div></td>
					<td valign="top"><div id="karma_sent"></div></td>
				</tr>
			</table>
		</div>

        <div style="border: 2px solid #ccc; background: #fff; padding: 10px; margin: 10px;">
<script type="text/javascript"><!--
    google_ad_client = "pub-7694563546477144";
    /* 728x90, created 2/4/11 */
    google_ad_slot = "3314585997";
    google_ad_width = 728;
    google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
       </div>	
    </div>
    </form>


<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-6713202-10']);
_gaq.push(['_trackPageview']);

(function () {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

</body>
</html>
